<script lang="ts" setup>
import { h, reactive, ref, toRefs } from 'vue'
import { AuditOutlined } from '@ant-design/icons-vue'
import { Api } from '@/api/'
import to from '@/utils/awaitTo'
import { message } from 'ant-design-vue'
import { PlayVideo } from '../index'


// 引用声明
const props = defineProps({
  row: {
    type: Object,
    default: () => {
    }
  }
})

// 引用事件
const emits = defineEmits(['callback'])

// 响应式声明
const formRef = ref()
const state = reactive({
  open: false,
  title: '',
  loading: false,
  form: {
    videoId: '',
    operateStatus: '',
    remark: '阿斯顿'
  },
  rules: {
    // videoId: [
    //     { required: true, message: "出问题了", trigger: 'change' }
    // ],
    operateStatus: [
      { required: true, message: '请审核哦', trigger: 'change' }
    ],
    remark: [
      { required: true, message: '审核驳回一定要写原因哦', trigger: 'change' }
    ]
  }
})

const { open, title, loading, form, rules } = toRefs(state)

// 点击事件
const handleOpen = () => {
  console.log(props.row)
  open.value = true
  form.value.videoId = props.row.videoId

}

// ok
const handleOk = () => {
  formRef.value.validateFields()
    .then(async (values) => {
      loading.value = true
      console.log(form.value)
      const [error, data] = await to(Api.video.videoFinalJud(form.value))
      loading.value = false
      if (!error && data) {
        message.success('你已经审核该内容')
        open.value = false
        emits('callback')
      }
    })
    .catch(info => {
      console.log('Validate Failed:', info)
    })
}


/** 审核状态 */
const AuditTypeDict = [
  {
    label: '审核通过',
    value: '1'
  },
  {
    label: '审核驳回',
    value: '2'
  }
]

</script>

<template>
  <div>
    <a-button :icon="h(AuditOutlined)" type="primary" @click="handleOpen">视频终审</a-button>

    <a-modal v-model:open="open" :maskClosable="false" :ok-button-props="{ loading: loading }"
             :title="title + ' ' + '(' + row.topicTitle + ')'" width="100" wrap-class-name="full-modal" @ok="handleOk">
      <a-form ref="formRef" :model="form" :rules="rules" autocomplete="off" layout="vertical" name="basic">
        <a-form-item label="">
          <PlayVideo :field-names="{url:'originalFilmUrl',title:'topicTitle'}" :row="row" />
        </a-form-item>

        <a-form-item label="审核状态" name="operateStatus">
          <a-radio-group v-model:value="form.operateStatus">
            <a-radio v-for="(item) in AuditTypeDict" :key="item.value"
                     :value="item.value">{{ item.label }}
            </a-radio>
          </a-radio-group>
        </a-form-item>


        <a-form-item v-if="Number(form.operateStatus) === 2" label="审核意见(富文本编辑器)" name="remark">
          <!--          <wangeditor-vue ref="referenceRef" v-model="form.remark" />-->
        </a-form-item>

      </a-form>

    </a-modal>

  </div>
</template>

<style lang="less" scoped>

</style>
